<template>
	<a-row :gutter="10">
		<a-col :xs="24" :sm="24" :md="24" :lg="5" :xl="5">
			<a-card :bordered="false" :loading="cardLoading">
				<a-form ref="tableSearchFormRef" name="table_search" :model="tableSearchFormState">
					<a-row :gutter="24">
						<a-col :span="22">
							<a-form-item name="searchKey">
								<a-input-search
									v-model:value="tableSearchFormState.tableName"
									@search="loadTreeData()"
									placeholder="表格名称"
									enterButton
									allowClear
								/>
							</a-form-item>
						</a-col>
					</a-row>
				</a-form>
				<a-tree
					v-if="treeData.length > 0"
					v-model:expandedKeys="defaultExpandedKeys"
					:tree-data="treeData"
					:field-names="treeFieldNames"
					v-model:checkedKeys="checkedKeys"
					@select="treeSelect"
				/>
				<a-empty v-else :image="Empty.PRESENTED_IMAGE_SIMPLE" />
			</a-card>
		</a-col>
		<a-col :xs="24" :sm="24" :md="24" :lg="19" :xl="19">
			<a-card :bordered="false" style="margin-bottom: 10px">
				<a-form ref="searchFormRef" name="advanced_search" class="ant-advanced-search-form" :model="searchFormState">
					<a-row :gutter="24">
						<a-col :span="8">
							<a-form-item name="fieldName" label="字段名称">
								<a-input v-model:value="searchFormState.fieldName" placeholder="请输入字段名称" />
							</a-form-item>
						</a-col>
						<a-col :span="8">
							<a-button type="primary" @click="loadData">
								<template #icon><SearchOutlined /></template>
								查询
							</a-button>
							<a-button class="leisure-buttom-left" @click="reset">
								<template #icon><redo-outlined /></template>
								重置
							</a-button>
							<a-button class="leisure-buttom-left" type="primary" @click="openModel()">
								<template #icon><plus-outlined /></template>
								新增
							</a-button>
						</a-col>
					</a-row>
				</a-form>
			</a-card>
			<a-card :bordered="false">
				<div className="s-table-tool">
					<div className="s-table-tool-left">
						<!-- 插槽操作按钮 -->
						<slot name="operator"></slot>
					</div>
					<!--  斑马纹 -->
					<div className="layout-items-center s-table-tool-right">
						<span v-for="item in tool">
							<!-- 刷新 -->
							<a-tooltip v-if="item.name === 'refresh'" :title="item.title" class="s-tool-item" @click="refresh">
								<component class="icons" :is="item.icon"></component>
							</a-tooltip>

							<!-- 列展示 -->
							<a-popover
								v-if="item.isPopover && item.name === 'columnSetting'"
								trigger="click"
								placement="topLeft"
								overlayClassName="s-table-column-settings"
								arrow-point-at-center
							>
								<template #content>
									<columnSetting :columns="columns" @columnChange="columnChange" />
								</template>
								<a-tooltip :title="item.title" class="s-tool-item">
									<component class="icons" :is="item.icon"></component>
								</a-tooltip>
							</a-popover>
						</span>
					</div>
				</div>
				<a-table
					ref="tableRef"
					:columns="columns"
					:dataSource="data"
					:expand-row-by-click="true"
					bordered
					:tool-config="toolConfig"
					:row-key="(record) => record.id"
					:scroll="{ x: 1000, y: 200 }"
				>
					<template #bodyCell="{ column, record }">
						<template v-if="record.value[column.dataIndex]">
							<span>{{ record.value[column.dataIndex] }}</span>
						</template>

						<template v-if="column.dataIndex === 'action'">
							<a v-if="!record.sync || record.sync === 'N'" @click="onSync(record, 'Y')">开启同步</a>
							<a-divider v-if="!record.sync || record.sync === 'N'" type="vertical" />
							<a v-if="record.sync === 'Y'" @click="onSync(record, 'N')">关闭同步</a>
							<a-divider v-if="record.custom === 'Y'" type="vertical" />
							<a-popconfirm v-if="record.custom === 'Y'" title="删除此字段？" @confirm="deleteFile(record)">
								<a-button type="link" danger size="small">删除</a-button>
							</a-popconfirm>
						</template>
					</template>
				</a-table>
			</a-card>
		</a-col>
	</a-row>
	<a-modal v-model:visible="visible" title="dsadsa" @ok="handleOk">
		<a-form ref="formRef" :model="formData" :rules="formRules" :label-col="labelCol">
			<a-form-item label="字段编码：" name="fieldId">
				<a-input v-model:value="formData.fieldId" placeholder="请输入字段编码" allow-clear />
			</a-form-item>
			<a-form-item label="字段名称：" name="name">
				<a-input v-model:value="formData.name" placeholder="请输入字段名称" allow-clear />
			</a-form-item>
			<a-form-item label="字段别名：" name="alias">
				<a-input v-model:value="formData.alias" placeholder="请输入字段别名" allow-clear />
			</a-form-item>
			<a-form-item label="字段类型：" name="fieldType">
				<a-input v-model:value="formData.fieldType" placeholder="请输入字段类型" allow-clear />
			</a-form-item>
			<a-form-item label="字段排序：" name="sort">
				<a-input-number style="width: 100%" v-model:value="formData.sort" :max="100" />
			</a-form-item>
			<a-form-item label="字段描述：" name="description">
				<a-input v-model:value="formData.description" placeholder="请输入字段描述" allow-clear />
			</a-form-item>
		</a-form>
	</a-modal>
</template>

<script setup name="tableField">
import { Empty } from 'ant-design-vue'
import { onMounted } from 'vue'
import { isEmpty } from 'lodash-es'
import { required } from '@/utils/formRules'
import TableFieldForm from './TableFieldForm.vue'
import TableApi from '@/api/info/TableApi'
import TableFieldApi from '@/api/info/TableFieldApi'
import TableDataApi from '@/api/info/TableDataApi'
// 表单固定label实现
const labelCol = ref({
	style: {
		width: '100px'
	}
})
// 右上角工具数组
const tool = [
	{
		name: 'refresh',
		icon: 'sync-outlined',
		title: '刷新'
	},
	{
		name: 'height',
		icon: 'column-height-outlined',
		title: '密度',
		isDropdown: true
	},
	{
		name: 'columnSetting',
		icon: 'setting-outlined',
		title: '列设置',
		isPopover: true,
		visible: false
	}
]
const data = ref([])
const toolConfig = { refresh: true, height: true, columnSetting: true }
const emit = defineEmits({ goBack: null })
// 默认是关闭状态
const visible = ref(false)
const formRef = ref()
const searchFormState = ref({})
const searchFormRef = ref()
const tableRef = ref()
// 表单数据
const title = ref('')
// 默认展开的节点
const defaultExpandedKeys = ref([])
const checkedKeys = ref([])
const treeData = ref([])
// 替换treeNode 中 title,key,children
const treeFieldNames = { children: 'children', title: 'name', key: 'tableId' }
const cardLoading = ref(true)
const tableSearchFormState = ref({})

const tableSearchFormRef = ref()
const columns = ref([])
columns.value = [
	{
		title: '操作',
		dataIndex: 'action',
		align: 'left',
		width: 260,
		fixed: 'right'
	}
]
const formData = ref({})
// 默认要校验的
const formRules = {
	name: [required('请输入职位名称')],
	sort: [required('请选择排序')]
}
// 打开抽屉
const onOpen = async (record) => {
	visible.value = false
	title.value = record.name + '-字段详情'
	searchFormState.value.tableId = record.tableId

	nextTick(() => {
		tableRef.value.refresh(true)
	})
}
// 加载左侧的树
const loadTreeData = () => {
	tableSearchFormState.value.sync = 'Y'
	TableApi.list(tableSearchFormState.value).then((res) => {
		cardLoading.value = false
		if (res !== null && res.length > 0) {
			treeData.value = res
			defaultExpandedKeys.value = [res[0].tableId]
			checkedKeys.value = [res[0].tableId]
		} else {
			treeData.value = []
		}
	})
}
// 列设置
const columnChange = (val) => {
	columns.value = []
	columns.value = val
	if (val) {
		val.forEach((item) => {
			if (columns.length > 2) {
				columns.value.push({
					title: item.fieldName,
					dataIndex: item.fieldId,
					width: 150
				})
			} else {
				columns.value.push({
					title: item.fieldName,
					dataIndex: item.fieldId,
					fixed: 'left'
				})
			}
		})
		columns.value.push({
			title: '操作',
			dataIndex: 'action',
			align: 'left',
			width: 120,
			fixed: 'right'
		})
	}
}
// 点击树查询
const treeSelect = async (selectedKeys) => {
	console.log(selectedKeys)
	if (selectedKeys && selectedKeys.length > 0) {
		searchFormState.value.tableId = selectedKeys.toString()
		const c = await TableFieldApi.list({ tableId: searchFormState.value.tableId,showPc:'Y' })
		columns.value = []
		if (c) {
			c.forEach((item) => {
				if (columns.length > 2) {
					columns.value.push({
						title: item.fieldName,
						dataIndex: item.fieldId,
						width: 150
					})
				} else {
					columns.value.push({
						title: item.fieldName,
						dataIndex: item.fieldId,
						width: 120,
						fixed: 'left'
					})
				}
			})
			columns.value.push({
				title: '操作',
				dataIndex: 'action',
				align: 'left',
				width: 120,
				fixed: 'right'
			})
		}
	} else {
		delete searchFormState.value.tableId
	}
	// tableRef.value.refresh(true)
	loadData()
}
// 获取站内信列表
const loadData = (parameter) => {
	if (!searchFormState.value.tableId) {
		return
	}
	if (!parameter) {
		parameter = {}
	}
	searchFormState.value.showPc='Y'
	TableDataApi.page(Object.assign(parameter, searchFormState.value)).then((res) => {
		data.value = res.records
		// return data
	})
}
// 开启同步
const onSync = (record, sync) => {
	const params = {
		id: record.id,
		sync: sync
	}
	TableFieldApi.openSync(params).then(() => {
		tableRef.value.refresh(true)
	})
}
const openModel = () => {
	// visible.value = true
	columns.value = [
		{
			title: 'm',
			dataIndex: '1104001101000000',
			ellipsis: true
		}
	]
}
const hideModal = () => {
	visible.value = false
}
const handleOk = () => {
	visible.value = false
}
// 关闭抽屉
const onClose = () => {
	searchFormState.value = {}
	visible.value = false
}
// 重置
const reset = () => {
	searchFormRef.value.resetFields()
	tableRef.value.refresh(true)
}

defineExpose({
	onOpen
})
onMounted(() => {
	loadTreeData()
})
</script>

